joolun-mp-ma/mp-ma

私有库

一开发环境部署教程一版本升级说明一生产环境部署（centos7）推荐一生产环境部署（windows）一 Z推荐视频教程 A Spring Cloud Gateway网关和动态路由的实现 A 代码生成器使用说明、菜单权限配置 A 使用Maven打包生成jar包到指定目录 A 前端报文加密 A 前端框架文档 A 各终端auth2登录 A 后台用户权限控制 A 图形验证码机制 A 多租户功能 A 如何新建微服务，并用postman接口调试 A 接口直接对外暴露 A 数据库说明 A 数据权限 A 文件上传和存储功能 A 文本编辑器 A 短信发送功能 A 系统功能操作手册 A 逻辑删除 A 阿里巴巴图标库使用 A 项目架构图 A 项目结构说明 A Docker容器部署 A Email邮件发送功能 A Feign服务间相互调用 A Sentinel使用 A Swagger文档配置 A XXL_JOB定时任务使用 A druid数据监控 A seata分布式事务 B 公众号接入教程 B 公众号素材图片防盗链处理 B 微信第三方平台接入 B 微信SDK文档 C 小程序使用自定义导航栏 C 小程序分享海报生成 C 小程序商城客服 C 小程序广告 C 小程序接口访问原理、postman调试【新】 C 小程序接口访问原理、postman调试 C 小程序本地测试和手机预览 C 小程序用户隐私保护指引设置 C 小程序直播功能 C 小程序订阅消息的使用 C 小程序CSS样式组件 D 商城中【乐观锁】的使用 D 商城订单流程说明 D 快递100配置 D redis的key值过期提醒功能使用 Home

Table of Contents

用户权限系统

前端控制

后端控制

此文件含有可能会与其他字符混淆的 Unicode 字符。如果您是想特意这样的，可以安全地忽略该警告。使用 Escape 按钮显示他们。

用户权限系统

系统概述

一个用户权限管理系统，主要包括三个元素：用户、角色、权限。我们所要管理的，也就是用户、角色和权限之间的关系
用户：基本上所有的应用，无论是移动端，PC端，C端或B端产品，登陆都需要一个用户。只是对于C端的产品，都是用户自己注册即可。而对于后台产品而言，是需要公司内部人员去创建用户的。
角色：所谓角色，就是用来控制各个用户的操作范围的，可以理解为权限组。因为一个系统中权限太多，我们不可能每创建一个用户，就去挨个设置一遍权限，因此可以根据不同的部门、职级、工作内容等来对权限进行分组，制定成不同的角色，这样，在创建用户时，就可以直接赋予用户不同的角色，从而把角色拥有的权限给到这个用户。
系统的主要流程为：将权限设置成不同的集合，即角色，再将角色绑定到用户上，那么这个用户就拥有了这些角色的权限集合。一个用户可以绑定多个角色，一个角色又拥有多个权限。

如上图所示：用户A拥有了角色1和角色2两个角色，从而拥有了“增加、删除、审核”的权限。

管理流程

菜单管理：可以理解为每个菜单就是一个不同的权限，通过不同的”权限标识“区分

角色管理：不同角色设置不同权限

用户管理：管理用户用户信息，并将相应角色授予用户

演示账号说明

我们演示环境为了方便给大家展示，创建了几个演示角色和账号，本地代码是没有的，如果有需要可以自己对照演示环境的角色和账号添加进来

前端控制

前端主要使用vuex保存用户的权限信息，然后通过v-if 判断是否有权限，如果有权限就渲染这个dom元素。我们以公众号用户管理页面来讲解

从vuex 获取保存的permissions，结合avue-crud组件实现操作按钮的显隐

https://avuejs.com/doc/crud/crud-permission

<avue-crud ref="crud"
     :page.sync="page"
     :data="tableData"
     :permission="permissionList"
     :option="tableOption"
     v-model="form"
     @on-load="getPage"
     @refresh-change="refreshChange"
     @row-update="handleUpdate"
     @row-save="handleSave"
     @row-del="handleDel">
</avue-crud>

computed: {
      ...mapGetters(['permissions']),
      permissionList() {
        return {
          addBtn: this.permissions['wxmp:wxuser:add'] ? true : false,
          delBtn: this.permissions['wxmp:wxuser:del'] ? true : false,
          editBtn: this.permissions['wxmp:wxuser:edit'] ? true : false,
          viewBtn: this.permissions['wxmp:wxuser:get'] ? true : false,
        }
      }
    }

单独按钮结合v-if实现操作按钮的显隐

<el-button type="success"
    @click="doMore()"
    size="small"
    icon="el-icon-document"
    v-if="permissions['wxmp:wxuser:edit']">其他操作</el-button>

后端控制

注解@PreAuthorize，通过获取用户菜单列表，和请求的地址和请求方法对比判断有没有权限

@ApiOperation(value = "通过id查询微信用户")
@GetMapping("/{id}")
@PreAuthorize("@ato.hasAuthority('wxmp:wxuser:get')")
public R getById(@PathVariable("id") String id){
    return R.ok(wxUserService.getById(id));
}

上面的权限要在后台菜单管理中添加，并授权给了用户的角色，具体请查看文档：A 代码生成器使用说明、菜单权限配置

高速下载